<template>
	<el-main>
		<el-row type="flex">
			<el-col>
				<el-button type="primary" size="medium" icon="el-icon-edit" @click="toCreate">
					新增组织
				</el-button>
			</el-col>
			<el-col class="hidden-md-and-down right">
				<el-form :inline="true">
					<el-form-item label="状态">
						<el-select
							v-model="value" 
							@change='handleChange' 
							placeholder="请选择">
							<el-option
								v-for="item in options"
								:key="item.value"
								:label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="搜索">
						<el-input
							v-model="params.keywords" 
							@input="goSearch" 
							placeholder="请输入组织名称" 
							prefix-icon="el-icon-search" 
							clearable>
						</el-input>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-table :data="tableData" border style="margin-top: 10px;">
			<el-table-column
				prop="orgName"
				label="组织名称">
			</el-table-column>
			<el-table-column
				prop="createTime"
				label="创建时间">
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template slot-scope="scope">
					<span v-if="scope.row.status==1" style="color:green;">
						启用
					</span>
					<span v-if="scope.row.status==2" style="color:red;">
						停用
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="196">
				<template slot-scope="scope">
					<el-button type="primary" size="small" 
						@click="getDetail(scope.row.orgId)">
						查看详情
					</el-button>
					<el-button type="danger" size="small" 
						@click="deleteOrganization(scope.row.orgId,scope.$index)">
						删除组织
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="page-block" v-if="params.totalCount > 0">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:page-size="params.pageSize"
				:current-page.sync="params.currentPage"
				layout="total, prev, pager, next, jumper"
				:total="params.totalCount">
			</el-pagination>
		</div>
	</el-main>
</template>

<script>
	import { getOrganizationList,deleteOrganization } from '@/api/organization.js'
	export default {
		data() {
			return {
				tableData: [],
				params: {
					// 当前页
					currentPage: 1,
					// 每页多少条
					pageSize: 10,
					// 统计总数
					totalCount: 0
				},
				options: [
					{
						value: '0',
						label: '全部'
					}, 
					{
						value: '1',
						label: '启用'
					},
					{
						value: '2',
						label: '停用'
					}
				],
				value: '0'
			}
		},
		mounted() {
			this.getOrganizationList();
		},
		methods: {
			// 搜索
			goSearch(e){
				this.params.keywords = e;
				this.params.currentPage = 1;
				this.getOrganizationList();
			},
			// 获取列表
			getOrganizationList() {
				let _this = this;
				getOrganizationList(_this.params).then(function(res){
					if (res.code === 200) {
						_this.tableData = res.data.records;
						_this.params.totalCount = res.data.total;
					} else {
						_this.$message.error(res.msg);
					}
				})
			},
			// 下拉框取值
			handleChange(val) {
				this.params.status = val;
				this.params.currentPage = 1;
				this.getOrganizationList();
			},
			// 每页多少条
			handleSizeChange(val) {
				this.params.pageSize = val;
				this.getOrganizationList();
			},
			// 当前页
			handleCurrentChange(val) {
				this.params.currentPage = val;
				this.getOrganizationList();
			},
			// 查看详情
			getDetail(orgId) {
				this.$router.push({
					path: './detail',
					query: {'orgId': orgId}
				});
			},
			// 新增
			toCreate() {
				this.$router.push('./detail');
			},
			// 删除组织
			deleteOrganization(orgId,index) {
				this.$confirm('此操作将永久删除该组织，是否继续？', 
				'提示', {type: 'warning'}).then(() => {
					let _this = this;
					deleteOrganization({'orgId': orgId}).then(function(res){
						if (res.code === 200) {
							_this.tableData.splice(index, 1);
							_this.$message({
								message: res.msg,
								type: 'success'
							});
						} else {
							_this.$message.error(res.msg);
						}
					})
				}).catch(() => {});
			}
		}
	}
</script>

<style scoped="scoped">
	.el-form-item {
		margin-bottom: 0;
		margin-right: 0;
	}
	.el-form-item+.el-form-item {
		margin-left: 10px;
	}
	.right {
		text-align: right;
	}
</style>